| SharePoint modern list view customization example | 您所在的位置：网站首页 › best status page examples advanced customization › SharePoint modern list view customization example |
SharePoint modern list view customization example
|
In this SharePoint customization tutorial, we will discuss how to customize the SharePoint modern list view using JSON. Here we will see various sharepoint modern list view customization examples. Apart from this, we will also see a few sharepoint column formatting examples, and sharepoint column formatting json examples. As we know in the year 2016, SharePoint online team released Modern List and Library experience in both SharePoint On-Premise and online. So now a day business recommends this feature for more benefits. I am not using JSLink to customize our modern list rather than, I am going forward to use JSON for an excellent user interface. If we go in detail, there are many good features added in both modern lists and libraries but here I am using those called List View Customizations. Table of Contents SharePoint modern list view customization exampleHere, I have taken a laptop list and we will see how by using the SharePoint Online list view customization using JSON, we can change the list view. Step 1: I have created a SharePoint Online List called Laptop List and it contains the following column name. Title – Single Line TextModel- Single Line Text.Processor– Single Line TextRAM: Single Line TextHard Disk: Single Line TextScreen Size: Singe Line TextBattery : Single Line TextRating : NumberPhoto: Hyperlink SharePoint modern list view customization example
Step 2: Next click on All Items and click on Format View to implement our customization code. 
Step 3: Next copy the below code and paste it inside code editor and click on Save. { "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "_comment_": "Laptop Photo DIV", "attributes": { "class": "ms-bgColor-greenLight" }, "style": { "display": "flex", "flex-wrap": "wrap", "align-items": "stretch", "flex-direction": "row", "padding": "20px", "margin-bottom": "16px", "max-width": "850px", "border-radius": "8px" }, "children": [ { "elmType": "div", "__comment": "DIV L1", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "stretch", "max-width": "260px" }, "children": [ { "elmType": "img", "style": { "width": "260px", "height": "160px" }, "attributes": { "src": "[$Photo]" } } ] }, { "elmType": "div", "__comment": "DIV L2", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "360px", "min-width": "205px" }, "children": [ { "elmType": "span", "txtContent":"='Brand : ' + [$Title]", "style": { "display": "block" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } }, { "elmType": "span", "txtContent": "Model", "style": { "display": "block", "padding-top": "20px" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } }, { "elmType": "span", "txtContent": "[$Model]" }, { "elmType": "span", "txtContent": "='Processor : ' + [$Processor]", "style": { "display": "block", "padding-top": "20px" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } } ] }, { "elmType": "div", "__comment": "DIV L3", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "align-items": "center", "margin-top": "10px", "max-width": "310px", "min-width": "155px" }, "children": [ { "elmType": "div", "__comment": "HardWwareDIV", "style": { "display": "block", "font-size": "15px", "font-weight": "bold" }, "children": [ { "elmType": "span", "txtContent": "[$RAM]", "style": { "padding-right": "5px" } } ] }, { "elmType": "span", "txtContent": "Price", "style": { "display": "block", "padding-top": "20px" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } }, { "elmType": "span", "txtContent": "=[$Price]", "style": { "display": "block" } }, { "elmType": "span", "txtContent": "Rating", "style": { "display": "block", "padding-top": "20px" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary" } }, { "elmType": "span", "txtContent": "=[$Rating]", "style": { "padding-right": "5px" } }, { "elmType": "span", "attributes": { "iconName": "FavoriteStarFill", "class": "ms-fontColor-themePrimary" } } ] } ] } }Step 4: Once I click on the Save button, the SharePoint List view got changed to different views which same as the below screenshot.  SharePoint modern list view customization example
This is all about customization of List View in SharePoint Modern List. Create a birthday view using SharePoint Online modern list view customizationLet us see, how to create a birthday view using SharePoint Online modern list view customization using JSON. Follow the below steps to create a sharepoint birthday list view using SharePoint modern list view customization with JSON. Step 1: I have created a SharePoint List called Birthday List and it contains the following column name. Title – Single Line TextCompany – Single Line TextE-Mail – Single Line TextDepartment – Single Line TextDesignation – Single Line TextPhoto – photoBirthday – DateDOM – Single Line Text sharepoint birthday list
Step 2: Next click on All Items and click on Format View to implement our customization code.  sharepoint modern list view styles
Step 3: Next copy the below code and paste it inside code editor and click on Save. { "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideListHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-wrap": "wrap", "align-items": "stretch", "padding": "8px", "margin-bottom": "25px", "max-width": "420px", "border-radius": "8px", "box-shadow": "4px 4px 8px lightblue" }, "attributes": { "class": "ms-bgColor-themePrimary ms-fontColor-white" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1", "display": "flex", "flex-wrap": "wrap", "align-items": "stretch", "max-width": "310px" }, "children": [ { "elmType": "div", "style": { "flex": "none" }, "children": [ { "elmType": "div", "style": { "height": "100px", "overflow": "hidden", "border-radius": "5%", "margin-right": "8px" }, "children": [ { "elmType": "span", "txtContent": "[$Title]", "style": { "display": "block" }, "attributes": { "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-white" } }, { "elmType": "span", "txtContent": "[$Company]", "style": { "display": "=if([$Company] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white" } }, { "elmType": "span", "txtContent": "[$Department]", "style": { "display": "=if([$Department] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white" } }, { "elmType": "span", "txtContent": "[$Designation]", "style": { "display": "=if([$Designation] == '', 'none', 'block')" }, "attributes": { "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-white" } } ] } ] } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "max-width": "310px", "min-width": "95px" }, "children": [ { "elmType": "div", "style": { "flex-grow": "1" }, "children": [ { "elmType": "span", "style": { "display": "=if([$Birthday] |
【本文地址】